<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
    .container {
        width: 100%;
    }
</style>
<div id="member-app" class="dashboard-container">
    <div class="container">
        <div class="tableBar">
            <div class="el-input el-input--prefix el-input--suffix" style="width: 250px;">
                <input type="text" autocomplete="off" placeholder="请输入角色名" class="el-input__inner">
                <span class="el-input__prefix">
                    <i class="el-input__icon el-icon-search" style="cursor: pointer;"></i>
                </span>
            </div>
            <button type="button" class="el-button el-button--primary" id="btn-search">
                <span>查询</span>
            </button>
            <button onclick="exportAll()" type="button" class="el-button continue" style="color: #333333;background-color: #ffc200;border-color: #ffc200">
                <span>导出所有</span>
            </button>
            <button type="button" class="el-button el-button--primary el-button--add">
                <span>添加角色</span>
            </button>
            <input type="file" id="saveRole" style="display: none">
            <button type="button" class="el-button el-button--primary continue">
                <label for="saveRole" style="display: inline">
                    <span>上传excel</span>
                </label>
            </button>
            <button type="button" class="el-button el-button--primary btn-save">
                <span>导入</span>
            </button>
        </div>
        <div class="el-table tableBox el-table--fit el-table--striped el-table--enable-row-hover">
            <div class="hidden-columns">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </div>
            <div class="el-table__header-wrapper">
                <table cellspacing="0" cellpadding="0" border="0" class="el-table__header" style="width: 100%;">
                    <thead class="">
                        <tr class="">
                            <th colspan="1" rowspan="1" class="el-table_1_column_1   #tbody  is-leaf" style="width: 25px;">
                                <div class="cell" style="padding-left: 11px">
                                    <label class="el-checkbox is-disabled">
                                        <span class="el-checkbox__input">
                                            <input type="checkbox" value="" onchange='commonChoiceAll()'>
                                        </span>
                                    </label>
                                </div>
                            </th>
                            <th colspan="1" rowspan="1" class="el-table_1_column_2 is-leaf">
                                <div class="cell">角色名称</div>
                            </th>
                            <th colspan="1" rowspan="1" class="el-table_1_column_3 is-leaf">
                                <div class="cell">备注</div>
                            </th>
                            <th colspan="1" rowspan="1" class="el-table_1_column_4 is-leaf">
                                <div class="cell">创建时间</div>
                            </th>
                            <th colspan="1" rowspan="1" class="el-table_1_column_5 is-leaf">
                                <div class="cell">修改时间</div>
                            </th>
                            <th colspan="1" rowspan="1" class="el-table_1_column_6 is-leaf">
                                <div class="cell">创建用户</div>
                            </th>
                            <th colspan="1" rowspan="1" class="el-table_1_column_7 is-leaf">
                                <div class="cell">修改用户</div>
                            </th>
                            <th colspan="1" rowspan="1" class="el-table_1_column_8 is-center is-leaf" style="width: 153px">
                                <div class="cell">操作</div>
                            </th>
                        </tr>
                    </thead>
                </table>
            </div>
            <div class="el-table__body-wrapper is-scrolling-none">
                <table cellspacing="0" cellpadding="0" border="0" class="el-table__body" style="width: 100%;">
                    <tbody id="tbodyId"></tbody>
                </table>
                <div class="el-table__empty-block" style="height: 100%; width: 100%;display: none">
                    <span class="el-table__empty-text">暂无数据</span>
                </div>
            </div>
            <div class="el-table__column-resize-proxy" style="display: none;"></div>
        </div>
        <div class="pageList el-pagination" id="pageId">

        </div>
    </div>
</div>
<script src="api/member/member.js"></script>
<script>
    $(function (){
        $(".container").on("click",".el-button--add,.el-button--update",addPage);//跳转修改或者添加
        $(".el-button--primary").on("click",doGetObjects);//初始加载分页数据
        $(".btn-save").on("click",saveExcelRole);
        //先加载数据，再查询数据
        $("#pageId").load("page/page",function(){
            doGetObjects();
        })
    })

    /**
     * 导入
     */
    function saveExcelRole(){
        var fileName = $("#saveRole").val();//获取文件名
        //判断文件后缀
        if(!fileName.endsWith(".xlsx")) {
            commonShowTips("文件格式有误! 只能是.xlsx文件");
            return;
        }
        //判断文件控件的大小不能超过5M
        var uploadFile = $("#saveRole").get(0).files[0];
        if (uploadFile.size > 5 * 1024 * 1024) {
            commonShowTips("文件限制1MB以内!")
            return;
        }
        //ajax提供的对象, 存储文件相关信息(key-value的形式)
        var forData = new FormData();
        //key的名字自定义,value为文件控件对象
        forData.append("file", uploadFile);
        $.ajax({
            url:"role/saveExportRole",
            data:forData,
            dateType:"json",
            type:"post",
            //提交参数之前是否把参数转换为字符串：true--是，false--不是，默认是true
            processData:false,
            //提交之前，是否把参数统一按URLEncoded编码:true--是，false--不是，默认是true
            contentType:false,
            success:function(result){
                if (result.state == 1) {
                    commonShowTips("角色数据导入成功！");
                    doGetObjects();//刷新数据
                } else{
                    commonShowTips(result.message);
                }
            }
        })
    }
    /**
     * 导出所有
     */
    function exportAll(){
        //二次导出确认
        if(!confirm("确认导出吗?")){
            return;
        }
        var url = "role/exportAll";
        $.get(url,{},function (result){
            if (result.state == 1){
                commonShowTips("导出成功!");
            }else {
                commonShowTips("导出失败!");
            }
        })
    }

    //初始加载分页数据
    function doGetObjects(){
        var url = "role/findRole";
        var curPage = $("#pageId").data("curPage");
        var params = {
            "name" : $(".el-input__inner").val(),
            "curPage" :curPage ? curPage : 1,
            "pageSize" : 5
        };
        $.get(url,params,function(result){
            if(result.state == 0){
                commonShowTips(result.message);
            }else{
                loadRoleData(result.data.pageData);//加载表格主体数据
                setPageData(result.data);//分页
            }
        })
    }
    function loadRoleData(data){
        var tbody = $("#tbodyId");
        tbody.empty();
        for (var i = 0; i < data.length; i++) {
            var d = data[i];
            var tr = "<tr>" +
                "<td class='el-table_1_column_1   el-table-column--selection  is-leaf' style='width: 25px;'><div class='cell' style='padding-left: 11px'>" +
                "<label class='el-checkbox'><span class='el-checkbox__input'>" +
                "<input type='checkbox' id='input-data' aria-hidden='false'' value='" + d.id+ "' ></span></label></div></td>"
                +"<td class='el-table_1_column_2 is-leaf' colspan='1' rowspan='1'><div class='cell'>" + d.name + "</div></td>"
                +"<td class='el-table_1_column_3 is-leaf' colspan='1' rowspan='1'><div class='cell'>" + d.remarks + "</div></td>"
                +"<td class='el-table_1_column_4 is-leaf' colspan='1' rowspan='1'><div class='cell'>"+d.creationTime+"</div></td>"
                +"<td class='el-table_1_column_5 is-leaf' colspan='1' rowspan='1'><div class='cell'>"+d.modificationTime+"</div></td>"
                +"<td class='el-table_1_column_6 is-leaf' colspan='1' rowspan='1'><div class='cell'>"+d.createUser+"</div></td>"
                +"<td class='el-table_1_column_7 is-leaf' colspan='1' rowspan='1'><div class='cell'>"+d.updateUser+"</div></td>"
                +"<td class='el-table_1_column_8 is-leaf' colspan='1' rowspan='1' style='width: 153px'><div>"
                +"<button type='button' class='el-button el-button--primary  continue el-button--delete'>删除</button>"
                +"<button type='button' class='el-button--primary el-button el-button--update'>修改</button></div></td></tr>";
            tbody.append(tr);
            //每一行上面绑定当前行数据
            $("#tbodyId tr").last().data("role",d.id);
        }
        $(".el-button--delete").on("click",deleteRoel);//动态绑定删除角色事件
    }

    /**
     * 删除
     */
    function deleteRoel(){
        debugger
        if(!confirm("确定删除吗")){
            return;
        }
        var url = "role/deleteRole";
        //找到当前的tr绑定的roleId
        var tr = $(this).parents("tr");
        var id = tr.data("role");
        var param ={id:id};
        $.get(url,param,function(result){
            commonShowTips(result.message);
            //刷新数据
            doGetObjects()
        })
    }
    /**
     * 多选框全选事件方法
     */
    function commonChoiceAll() {
        //$():$包起来的是jq对象，是一个dom数组
        //加下标：变成js对象
        var firstInp = $(".el-checkbox__input input[type='checkbox']:first");
        var checked = firstInp[0].checked;//加下标变js对象
        //:gt(0) --->选择下标大于0的元素
        $(".el-checkbox__input input[type='checkbox']:gt(0)").prop("checked", checked);
    }
    //添加或修改角色页面
    function addPage(){
        var bool = $(this).hasClass("el-button--update");
        if(bool){
            var roleId = $(this).parents("tr").data("role");
            $("#cIframe").data("roleId",roleId);
        }
        $("#cIframe").load("role/add" ,function(){
        });
    }
</script>